<!-- start: PAGE TITLE -->
<section id="page-title">
	<div class="row">
		<div class="col-sm-8">
			<h1 class="mainTitle" translate="sidebar.nav.configuremanagerdb.LIST">{{ mainTitle }}</h1>
			<span class="mainDescription" translate="sidebar.nav.configuremanagerdb.LISTDesc">A type of data structure in which each element is attached to one or more elements directly beneath it. The connections between elements are called branches. <small class="block">Webopedia - Online Tech Dictionary for IT Professionals</small></span>
		</div>
		<!-- <div ncy-breadcrumb></div> -->
	</div>
</section>
<!-- end: PAGE TITLE -->
<!-- start: BOOTSRAP NAV TREE -->
<div class="container-fluid container-fullw bg-white">
	<div class="row" ng-controller="cmdbListCtrl">
		<div class="col-md-4 col-sm-2">
			<a class="btn btn-wide btn-blue" ng-click="download()"><span translate="sidebar.nav.configuremanagerdb.LISTButton.DOWNLOADTEMP">Download Template File</span><i class="fa fa-download fa fa-white"></i></a>	
			<a class="btn btn-wide btn-green" ng-click="export()" ladda="ldloading.expand_right" ng-disabled="!(ciclassify&&ciclassify.children.length==0)"><span translate="sidebar.nav.configuremanagerdb.LISTButton.EXPORT">Export Data</span><i class="fa fa-cloud-download fa-white"></i></a>
			<input type="file" nv-file-select="" uploader="importUploader"/>
			<a class="btn btn-wide btn-primary" ladda="ldloading.expand" ng-disabled="!(ciclassify&&ciclassify.children.length==0&&importUploader.getNotUploadedItems().length>0)" ng-click="import()" ><span translate="sidebar.nav.configuremanagerdb.LISTButton.IMPORT">Import Data</span><i class="fa fa-cloud-upload"></i></a>
			
							
			<h5 class="over-title margin-bottom-15"><span class="text-bold" translate="sidebar.nav.configuremanagerdb.plist.MANAGER">CI Manager</span></h5>
			<p translate="sidebar.nav.configuremanagerdb.plist.MANAGERDesc">
				This is a Tree directive for Angular JS apps that use Bootstrap CSS.
			</p>
			<div>
				<div class="row">
					<!-- /// cmdb ci classic /// -->
					<!-- <div class="col-md-4 col-sm-2"> -->
						<div class="panel panel-white">
							<div class="panel-header">
								<h5 translate="sidebar.nav.configuremanagerdb.plist.CLASSIC">CI Classic</h5>
							</div>
							<div class="panel-body">
								<div class="box-tree">
									<span ng-if="doing_async">...loading...</span>
									<abn-tree tree-data="my_data" tree-control="my_tree" on-select="my_tree_handler(branch)" expand-level="2" initial-selection="Granny Smith" icon-leaf="ti-file" icon-expand="ti-plus" icon-collapse="ti-minus"></abn-tree>
								</div>
							</div>
						</div>
						<div class="alert alert-warning">
							{{ output }}
						</div>
					<!-- </div> -->
					<!-- /// cmdb ci list by classic /// -->
					<!--div class="col-md-4 col-sm-6">
						<button ng-click="try_changing_the_tree_data()" class="btn btn-primary btn-o margin-bottom-15">
							Change The Tree Definition
						</button>
						<br>
						<button ng-click="try_async_load()" class="btn btn-primary btn-o">
							Load Tree Data Asynchronously
						</button>
						<hr>
						<h5>Test the Tree Control API:</h5>
						<br>
						<button ng-click="my_tree.select_first_branch()" class="btn btn-primary btn-sm margin-bottom-10">
							First Branch
						</button>
						<br>
						<button ng-click="my_tree.select_next_sibling()" class="btn btn-primary btn-sm margin-bottom-10">
							Next Sibling
						</button>
						<button ng-click="my_tree.select_prev_sibling()" class="btn btn-primary btn-sm margin-bottom-10">
							Prev Sibling
						</button>
						<br>
						<button ng-click="my_tree.select_next_branch()" class="btn btn-primary btn-sm margin-bottom-10">
							Next Branch
						</button>
						<button ng-click="my_tree.select_prev_branch()" class="btn btn-primary btn-sm margin-bottom-10">
							Prev Branch
						</button>
						<br>
						<button ng-click="my_tree.select_parent_branch()" class="btn btn-primary btn-sm margin-bottom-10">
							Parent
						</button>
						<hr>
						<button ng-click="my_tree.expand_branch()" class="btn btn-primary btn-sm margin-bottom-10">
							Expand
						</button>
						<button ng-click="my_tree.collapse_branch()" class="btn btn-primary btn-sm margin-bottom-10">
							Collapse
						</button>
						<button ng-click="my_tree.expand_all()" class="btn btn-primary btn-sm margin-bottom-10">
							Expand All
						</button>
						<button ng-click="my_tree.collapse_all()" class="btn btn-primary btn-sm margin-bottom-10">
							Collapse All
						</button>
						<hr>
						<button ng-click="try_adding_a_branch()" class="btn btn-primary btn-sm margin-bottom-10">
							Add Branch
						</button>
						ui-grid-cellNav ui-grid-resize-columns ui-grid-pinning ui-grid-selection ui-grid-move-columns 
					</div-->
				</div>
			</div>
		</div>
		<div class="col-md-8 col-sm-4">
			<div class="col-md-12">
				<div id="grid1" ui-grid="gridOptions" ui-grid-pagination ui-grid-selection ui-grid-resize-columns ui-grid-move-columns external-scopes="$scope" class="grid"></div>
			</div>
			<div class="col-md-12">
				<form ng-submit="vm.submit(vm.model,'gray')" >
			        <tabset>
			          <tab ng-repeat="tab in vm.tabs"
			               heading="{{tab.title}}"
			               active="tab.active"
			               disable="tab.disabled">
			            <formly-form model="tab.form.model" fields="tab.form.fields" form="vm.form" options="tab.form.options">
			            </formly-form>
			          </tab>
          			  <tab heading="保存">
          			  	<div class="col-xs-12 margin-top-30 margin-bottom-30">
          			  		<button type="submit" ladda="ldloading.gray" ng-disabled="!vm.form.$$parentForm.$valid" class="col-md-offset-8 btn btn-primary"><span translate="form.button.SUBMIT">Submit</span></button>
							<a ladda="ldloading.gray" class="btn btn-danger" data-style="expand-right" data-spinner-color="#999999" ng-click="vm.remove(vm.model,'gray')">
								<span translate="form.button.REMOVE">DELETE</span>
							</a>
			                <!--button type="button" ladda="ldloading.sm" class="margin-left-5 btn btn-default" ng-click="vm.options.resetModel()" translate="form.button.RESET">Reset</button-->
			            </div>
          			  </tab>
        			</tabset>
			    </form>
			</div>
		</div>


		<!--div class="col-md-12">
			<h5 class="over-title margin-bottom-15"><span class="text-bold" translate="sidebar.nav.configuremanagerdb.plist.MANAGER">CI Manager</span></h5>
			<p translate="sidebar.nav.configuremanagerdb.plist.MANAGERDesc">
				This is a Tree directive for Angular JS apps that use Bootstrap CSS.
			</p>
			<div ng-controller="cmdbListCtrl">
				<div class="row">
					<div class="col-md-4 col-sm-2">
						<div class="panel panel-white">
							<div class="panel-header">
								<h5 translate="sidebar.nav.configuremanagerdb.plist.CLASSIC">CI Classic</h5>
							</div>
							<div class="panel-body">
								<div class="box-tree">
									<span ng-if="doing_async">...loading...</span>
									<abn-tree tree-data="my_data" tree-control="my_tree" on-select="my_tree_handler(branch)" expand-level="2" initial-selection="Granny Smith" icon-leaf="ti-file" icon-expand="ti-plus" icon-collapse="ti-minus"></abn-tree>
								</div>
							</div>
						</div>
						<div class="alert alert-warning">
							{{ output }}
						</div>
					</div>
					<div class="col-md-8 col-sm-4">
						<div id="grid1" ui-grid="gridOptions" ui-grid-pagination external-scopes="$scope" ui-grid-cellNav ui-grid-resize-columns ui-grid-pinning ui-grid-selection ui-grid-move-columns ui-grid-exporter ui-grid-grouping class="grid"></div>
					</div>
					<div class="col-md-4 col-sm-6">
						<button ng-click="try_changing_the_tree_data()" class="btn btn-primary btn-o margin-bottom-15">
							Change The Tree Definition
						</button>
						<br>
						<button ng-click="try_async_load()" class="btn btn-primary btn-o">
							Load Tree Data Asynchronously
						</button>
						<hr>
						<h5>Test the Tree Control API:</h5>
						<br>
						<button ng-click="my_tree.select_first_branch()" class="btn btn-primary btn-sm margin-bottom-10">
							First Branch
						</button>
						<br>
						<button ng-click="my_tree.select_next_sibling()" class="btn btn-primary btn-sm margin-bottom-10">
							Next Sibling
						</button>
						<button ng-click="my_tree.select_prev_sibling()" class="btn btn-primary btn-sm margin-bottom-10">
							Prev Sibling
						</button>
						<br>
						<button ng-click="my_tree.select_next_branch()" class="btn btn-primary btn-sm margin-bottom-10">
							Next Branch
						</button>
						<button ng-click="my_tree.select_prev_branch()" class="btn btn-primary btn-sm margin-bottom-10">
							Prev Branch
						</button>
						<br>
						<button ng-click="my_tree.select_parent_branch()" class="btn btn-primary btn-sm margin-bottom-10">
							Parent
						</button>
						<hr>
						<button ng-click="my_tree.expand_branch()" class="btn btn-primary btn-sm margin-bottom-10">
							Expand
						</button>
						<button ng-click="my_tree.collapse_branch()" class="btn btn-primary btn-sm margin-bottom-10">
							Collapse
						</button>
						<button ng-click="my_tree.expand_all()" class="btn btn-primary btn-sm margin-bottom-10">
							Expand All
						</button>
						<button ng-click="my_tree.collapse_all()" class="btn btn-primary btn-sm margin-bottom-10">
							Collapse All
						</button>
						<hr>
						<button ng-click="try_adding_a_branch()" class="btn btn-primary btn-sm margin-bottom-10">
							Add Branch
						</button>
					</div>
					
				</div>
			</div>
		</div>-->
	</div>
</div>
<!-- end: BOOTSRAP NAV TREE -->